<template>
	<view class="uplods">
		<!-- 渲染组件 -->
		<view class="steps-commonts">
			<view v-for="(item,index) of stepsCommonts" :key="index">
				<view v-if="item.step === 1">
					<view class="step-titel">
						<text>{{item.title}}</text>
						<text class="iconfont icon-stepDele" @click="delStep(index)"></text>
					</view>
					<view class="step-explain">
						<text class="step-left-title">步骤说明：</text>
						<textarea value="" v-model="item.explain" placeholder="适用于需要点击链接,访问网页的操作,输入内容,提示打开网址相关注意事项!" />
					</view>
					<view class="step-explain">
						<text class="step-left-title">填写网址：</text>
						<input type="text" value="" v-model="item.value" placeholder="链接" />
					</view>
				</view>
				<view v-if="item.step === 2">
					<view class="step-titel">
						<text>{{item.title}}</text>
						<text class="iconfont icon-stepDele" @click="delStep(index)"></text>
					</view>
					<view class="step-explain">
						<text class="step-left-title">步骤说明：</text>
						<textarea value="" v-model="item.explain" placeholder="适用于需要点击链接,访问网页的操作,输入内容,提示打开网址相关注意事项!" />
					</view>
					<view class="step-explain">
						<text class="step-left-title">图文说明：</text>
						<view class="graphic-description">
							<view class="graphic-description-top" @click="upload(index)">
								<view class="graphic-description-left">
									<text class="iconfont icon-img"></text>
									<text>选择图片</text>
								</view>
								<text class="iconfont icon-dayu"></text>
							</view>
							<view class="step-image" v-if="item.imgUrl">
								<image :src="item.imgUrl" mode="widthFix" @click="seeImg(item.imgUrl)"></image>
							</view>
						</view>
					</view>
				</view>
				<view v-if="item.step === 3">
					<view class="step-titel">
						<text>{{item.title}}</text>
						<text class="iconfont icon-stepDele" @click="delStep(index)"></text>
					</view>
					<view class="step-explain">
						<text class="step-left-title">步骤说明：</text>
						<textarea value="" v-model="item.explain" placeholder="适用于需要点击链接,访问网页的操作,输入内容,提示打开网址相关注意事项!" />
					</view>
					<view class="step-explain">
						<text class="step-left-title">二维码图：</text>
						<view class="graphic-description">
							<view class="graphic-description-top" @click="upload(index)">
								<view class="graphic-description-left">
									<text class="iconfont icon-img"></text>
									<text>选择图片</text>
								</view>
								<text class="iconfont icon-dayu"></text>
							</view>
							<view class="step-image" v-if="item.imgUrl">
								<image :src="item.imgUrl" mode="widthFix" @click="seeImg(item.imgUrl)"></image>
							</view>
						</view>
					</view>
				</view>
				<view v-if="item.step === 4">
					<view class="step-titel">
						<text>{{item.title}}</text>
						<text class="iconfont icon-stepDele" @click="delStep(index)"></text>
					</view>
					<view class="step-explain">
						<text class="step-left-title">步骤说明：</text>
						<textarea value="" v-model="item.explain" placeholder="适用于需要点击链接,访问网页的操作,输入内容,提示打开网址相关注意事项!" />
					</view>
					<view class="step-explain">
						<text class="step-left-title">图片示例：</text>
						<view class="graphic-description">
							<view class="graphic-description-top" @click="upload(index)">
								<view class="graphic-description-left">
									<text class="iconfont icon-img"></text>
									<text>选择图片</text>
								</view>
								<text class="iconfont icon-dayu"></text>
							</view>
							<view class="step-image" v-if="item.imgUrl">
								<image :src="item.imgUrl" mode="widthFix" @click="seeImg(item.imgUrl)"></image>
							</view>
						</view>
					</view>
				</view>
				<view v-if="item.step === 5">
					<view class="step-titel">
						<text>{{item.title}}</text>
						<text class="iconfont icon-stepDele" @click="delStep(index)"></text>
					</view>
					<view class="step-explain">
						<text class="step-left-title">收集信息：</text>
						<textarea value="" v-model="item.value" placeholder="收集信息" />
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-btns">
			<!-- <view class="bottom-btn-left">
				<view class="bottom-btn">
					<button type="default">预览</button>
				</view>
			</view> -->
			<view class="bottom-btn-right">
				<view class="bottom-btn">
					<button type="default" @click="sava()">立即发布</button>
				</view>
			</view>
		</view>
		<uni-popup ref="addPopup" type="bottom">
			<view class="add-popup">
				<view class="add-tiast">
					选择添加步骤
				</view>
				<view class="add-lists">
					<view class="add-list" v-for="(item,index) of steps" :key="index" @click="handleStepSelect(item)">
						<text>{{item.title}}</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		expressionUrl
	} from "@/utils/util.js"
	import {release,rewardGet,editReward} from "@/api/reward.js"
	import {mapActions} from 'vuex';
	export default {
		name: "release-success",
		data() {
			return {
				basicData: {},
				steps: [{
						step: 1,
						title: "输入网址",
						explain: "",
						imgUrl: "",
						pathUrl:"",
						value: ""
					},
					{
						step: 2,
						title: "图文说明",
						explain: "",
						imgUrl: "",
						pathUrl:"",
						value: ""
					},
					{
						step: 3,
						title: "传二维码",
						explain: "",
						imgUrl: "",
						pathUrl:"",
						value: ""
					},
					{
						step: 4,
						title: "收集截图",
						explain: "",
						imgUrl: "",
						pathUrl:"",
						value: ""
					},
					{
						step: 5,
						title: "收集信息",
						explain: "",
						imgUrl: "",
						pathUrl:"",
						value: ""
					}
				],
				stepsCommonts: []
			}
		},
		onNavigationBarButtonTap(e) {
			this.$refs.addPopup.open()
		},
		async onLoad(option) {
			if (option && option.basic) {
				this.basicData = JSON.parse(decodeURI(option.basic))
				//编辑
				if(this.basicData.reward_id){
					let res = await rewardGet({id:this.basicData.reward_id})
					if(res.code === 1){
						let data = res.data;
						this.stepsCommonts = data.steps;
					}
				}
			}
		},
		methods: {
			...mapActions(['setUserInfo_action']),
			//删除
			delStep(index) {
				this.stepsCommonts = this.stepsCommonts.filter((item, i) => {
					return i !== index
				})
			},
			//添加
			handleStepSelect(item) {
				// copy一份处理
				let obj = JSON.stringify(item);
				this.stepsCommonts.push(JSON.parse(obj))
				this.$refs.addPopup.close()
			},
			//图片上传
			upload(index) {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						//图片上传
						const uploadTask = uni.uploadFile({
							url:this.$baseURL+'/api/upload/uploadImg',
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								'Authorization': uni.getStorageSync('oauth_token')
							},
							success: (uploadFileRes) => {
								let res = JSON.parse(uploadFileRes.data);
								if(res.code === 1){
									let data = this.stepsCommonts;
									data[index].imgUrl = res.data.url;
									data[index].pathUrl = res.data.pathUrl;
									//解决数组改变，视图不更新
									console.log(data)
									this.$set(this.stepsCommonts,data)
								}
							}
						});
						uploadTask.onProgressUpdate((res) => {
						    // console.log('上传进度' + res.progress);
						    // console.log('已经上传的数据长度' + res.totalBytesSent);
						    // console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
						    // 取消上传任务。
						    if (res.progress > 5000) {
								this.$msg("上传失败")
						        uploadTask.abort();
						    }
						});
					}
				});
			},
			//查看大图
			seeImg(url) {
				uni.previewImage({
					current: 0, //预览图片的下标
					urls: [url] //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			//验证
			verificationInfo() {
				let data = this.stepsCommonts;
				if (data.length === 0) {
					this.$msg("请添加相关步骤信息")
					return false
				}
				for (let i = 0; i < data.length; i++) {
					if (data[i].step === 1) {
						if (data[i].explain === "" || data[i].value === "") {
							this.$msg("请完善第" + (i + 1) + "步信息")
							return false
						}
						if (!expressionUrl(data[i].value)) {
							this.$msg("第" + (i + 1) + "步URL输入有误")
							return false
						}
					}
					if (data[i].step === 2 || data[i].step === 3 || data[i].step === 4) {
						if (data[i].explain === "") {
							this.$msg("请完善第" + (i + 1) + "步信息")
							return false
						}
						if(data[i].pathUrl === ""){
							this.$msg("请上传" + (i + 1) + "步图片信息")
							return false
						}
					}
					if (data[i].step === 5) {
						if (data[i].value === "") {
							this.$msg("请完善第" + (i + 1) + "步信息")
							return false
						}
					}
				}
				return true;
			},
			//保存
			sava() {
				if(!this.verificationInfo()){
					return
				}
				for(let item of this.stepsCommonts){
					delete item.imgUrl;
				}
				let strArr = JSON.stringify(this.stepsCommonts);
				this.basicData.steps = strArr;
				if(this.basicData.reward_id){
					editReward(this.basicData).then(res=>{
						if(res.code === 1){
							this.$msg(res.msg,1500,true,"success","center")
							this.setUserInfo_action();
							setTimeout(()=>{
								uni.navigateBack({
									delta: 3
								})
							},1500)
						}else{
							this.$msg(res.msg)
						}
					})
					return
				}
				release(this.basicData).then(res=>{
					if(res.code === 1){
						this.$msg(res.msg,1500,true,"success","center")
						this.setUserInfo_action();
						setTimeout(()=>{
							uni.navigateBack({
								delta: 3
							})
						},1500)
					}else{
						this.$msg(res.msg)
					}
				})
			}
		},
		watch: {
			basicData: {
				handler(newValue) {
					uni.setNavigationBarTitle({
						title: newValue.titleTabar
					})
				},
				immediate: true
			}
		}
	}
</script>

<style scoped lang="less" src="./release-success.less">
</style>
